<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../baselist.jsp"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.js"></script>
		<script src="${ctx}/js/highchart/highcharts.js"></script>
		<script src="${ctx}/js/highchart/highcharts-3d.js"></script>
		<script src="${ctx}/js/highchart/modules/exporting.js"></script>
		<style type="text/css">
			#container, #sliders {
				min-width: 310px; 
				max-width: 800px;
				margin: 0 auto;
			}
			#container {
				height: 400px; 
			}
		</style>
		<script type="text/javascript">
		$(function () {
		    // Set up the chart
		    var json = ${jsonString};
			    var chart = new Highcharts.Chart({
			        chart: {
			            renderTo: 'container',
			            type: 'column',
			            margin: 75,
			            options3d: {
			                enabled: true,
			                alpha: 15,
			                beta: 15,
			                depth: 50,
			                viewDistance: 25
			            }
			        },
			        title: {
			            text: '生产厂家销售情况'
			        },
			        subtitle: {
			            text: '---哪个厂家为我们做的贡献最大'
			        },
			        plotOptions: {
			            column: {
			                depth: 25
			            }
			        },
			        legend: {
			        	enabled: false
			        },
			        series: [{
			        	name:' ',
			            data:json
			        }],
			        xAxis:{
			        	   title:{
			        	       text:'厂家名称'
			        	   },
					        type: 'category'
			        	},
			        	yAxis:{
			        	   title:{
			        	       text:'生产数量'
			        	   }
			        	}
			    });
	
			    function showValues() {
			        $('#R0-value').html(chart.options.chart.options3d.alpha);
			        $('#R1-value').html(chart.options.chart.options3d.beta);
			    }
	
			    // Activate the sliders
			    $('#R0').on('change', function () {
			        chart.options.chart.options3d.alpha = this.value;
			        showValues();
			        chart.redraw(false);
			    });
			    $('#R1').on('change', function () {
			        chart.options.chart.options3d.beta = this.value;
			        showValues();
			        chart.redraw(false);
			    });
	
			    showValues();
			});
		</script>
	</head>
<body>
	<div id="container"></div>
	<div id="sliders">
		<table>
			<tr><td>观察角度调整</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
		    <tr><td>旋转调整</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
		</table>
	</div>
</body>
</html>
